<template>
  <!--  <el-dialog-->
  <!--    top="5vh"-->
  <!--    width="55%"-->
  <!--    title="详情"-->
  <!--    append-to-body-->
  <!--    v-if="visible"-->
  <!--    :modal-append-to-body="true"-->
  <!--    :close-on-click-modal="false"-->
  <!--    :visible.sync="visible"-->
  <!--    @close="handleEditReset"-->
  <!--  >-->
  <basic-container>
    <div class="dialog-content">
      <avue-form ref="editForm" :option="option">
        <template slot="planCode">
          <el-input placeholder="请输入编码" v-model="form.planCode" disabled>
            <el-button slot="append" icon="el-icon-refresh-right" @click="updateCode"></el-button>
          </el-input>
        </template>
        <template slot-scope="{}" slot="ruleControl">
          <h3>1. 防漏检验控制</h3>
          <div class="ml20">
            <el-radio v-model="form.allProduct" label="1">
              <el-tooltip content="在预警中心设置若待检单的未处理时长达到设定值时，则会预警消息通知" placement="top">
                <i class="el-tooltip el-icon-info"></i>
              </el-tooltip>
              允许生产，仅预警提示告知
            </el-radio>

            <span>备注：具体到预警中心设计</span>
          </div>
          <div class="mt20 ml20 rules-container">
            <el-radio v-model="form.allProduct" label="2" size="medium">
              <el-tooltip
                content="待检单达到设定的漏检时长控制时，若是工单首件，该工单每个生产工序都无法过站并提示； 若是工段首件，则该工段内的每个工序无法过站并提示！"
                placement="top"
              >
                <i class="el-tooltip el-icon-info"></i>
              </el-tooltip>
              不允许生产
            </el-radio>
            <div class="ml20 num-input-contain" v-if="form.allProduct === '2'">
              <label>漏检时长控制(min) : </label>
              <el-input-number placeholder="请输入漏检时长" v-model="form.hour" :min="0" controls-position="right" :precision="0" class="input-width"> </el-input-number>
            </div>
          </div>
        </template>
        <template slot-scope="{}" slot="nGControl">
          <h3>2. 检验结果为NG控制</h3>
          <div class="ml20">
            <el-radio v-model="form.allProduct1" label="1">
              <el-tooltip content="在预警中心设置若待检单的未处理时长达到设定值时，则会预警消息通知" placement="top">
                <i class="el-tooltip el-icon-info"></i>
              </el-tooltip>
              允许生产，仅预警提示告知
            </el-radio>
            <span>备注：具体到预警中心设计</span>
          </div>
          <div class="mt20 ml20 rules-container">
            <el-radio v-model="form.allProduct1" label="2" size="medium">
              <el-tooltip
                content="待检单达到设定的漏检时长控制时，若是工单首件，该工单每个生产工序都无法过站并提示； 若是工段首件，则该工段内的每个工序无法过站并提示！"
                placement="top"
              >
                <i class="el-tooltip el-icon-info"></i>
              </el-tooltip>
              不允许生产
            </el-radio>
          </div>
        </template>
        <template slot-scope="{}" slot="colseControl">
          <h3>3. 检验时长控制</h3>
        </template>
        <template slot-scope="{}" slot="avueCurd">
          <div class="avue-crud">
            <avue-crud ref="editCrud" v-model="form.data" :option="tableOption" :data="form.data"> </avue-crud>
          </div>
        </template>
      </avue-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" icon="el-icon-delete" @click="handleEditReset">取消</el-button>
    </span>
    <!--  </el-dialog>-->
  </basic-container>
</template>

<script>
import { guid } from '@/util/helpers';

export default {
  name: 'viewPlanConfig',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      option: {
        searchShow: true,
        searchMenuSpan: 6,
        menuPosition: 'right',
        submitBtn: false,
        emptyBtn: false,
        labelWidth: 150,
        group: [
          {
            label: '基础信息',
            prop: 'equipmentInfo',
            collapse: true,
            icon: 'el-icon-vertical-bar',
            labelWidth: 100,
            column: [
              {
                label: '计划名称',
                prop: 'planName',
                span: 8,
                rules: [{ required: true, message: '请输入计划名称', trigger: 'blur' }]
              },
              {
                label: '计划编码',
                prop: 'planCode',
                disabled: true,
                formslot: true,
                span: 8
              },
              {
                label: '检验类型',
                prop: 'planType',
                value: '首件检验',
                disabled: true,
                span: 8
              }
            ]
          },
          {
            label: '自动报检',
            prop: 'equipmentInfo1',
            collapse: true,
            icon: 'el-icon-vertical-bar',
            labelWidth: 100,
            column: [
              {
                label: '计划类型',
                prop: 'planName',
                span: 8,
                labelTip: '具体到预警中心设计',
                type: 'select',
                // 必填校验
                dicData: [
                  { label: '工单首件', value: 'wo' },
                  { label: '工段首件', value: 'wo2' }
                ],
                rules: [{ required: true, message: '请选择计划类型', trigger: 'change' }]
              }
            ]
          },
          {
            label: '防呆规则',
            prop: 'equipmentInfo2',
            collapse: true,
            icon: 'el-icon-vertical-bar',
            labelWidth: 100,
            column: [
              {
                prop: 'ruleControl',
                labelWidth: 0,
                span: 24,
                order: 6,
                formslot: true
              },
              {
                prop: 'nGControl',
                labelWidth: 0,
                span: 24,
                order: 6,
                formslot: true
              }
            ]
          },
          {
            label: '关闭控制',
            prop: 'equipmentInfo2',
            collapse: true,
            icon: 'el-icon-vertical-bar',
            labelWidth: 100,
            column: [
              {
                prop: 'colseControl',
                labelWidth: 0,
                span: 24,
                order: 6,
                formslot: true
              },
              {
                label: '未检时间(min)',
                type: 'number',
                disabled: true,
                min: 0,
                precision: 0,
                prop: 'time',
                labelWidth: 150,
                span: 10,
                rules: [{ required: true, message: '请输入未检时间', trigger: 'blur' }]
              }
            ]
          },
          {
            label: '适用对象',
            prop: 'equipmentInfo4',
            collapse: true,
            icon: 'el-icon-vertical-bar',
            labelWidth: 100,
            column: [
              {
                prop: 'avueCurd',
                labelWidth: 0,
                span: 24,
                order: 6,
                formslot: true
              }
            ]
          }
        ]
      },
      form: {
        planCode: '',
        data: [{}]
      },
      tableOption: {
        height: '400px',
        calcHeight: 30,
        tip: false,
        searchShow: false,
        filterBtn: false,
        refreshBtn: false,
        columnBtn: false,
        border: true,
        index: true,
        indexLabel: '序号',
        searchMenuSpan: 6,
        searchLabelWidth: 90,
        viewBtn: false,
        delBtn: true,
        editBtn: false,
        menu: false,
        addBtn: false,
        labelWidth: 130,
        selection: true,
        highlightCurrentRow: true, // 选中高亮
        dialogClickModal: false,
        searchMenuPosition: 'right',
        searchSpan: 6,
        column: [
          {
            label: '物料编码',
            prop: 'materialCode'
          },
          {
            label: '物料名称',
            prop: 'materialName'
          },
          {
            label: '生产工段',
            prop: 'spec'
          }
        ]
      }
    };
  },
  methods: {
    handleEditReset() {
      this.$refs.editForm.resetForm();
      this.$emit('update:visible', false);
      this.$emit('closeDialog');
    },
    handleEditSubmit() {
      console.log(this.form);
    },
    /**
     * 更新编码
     */
    updateCode() {
      const dateStr = this.$moment(new Date()).format('YYYYMMDD');
      this.form.planCode = 'FAI' + dateStr + guid().substr(24, 6);
      console.log(this.form.planCode);
    }
  }
};
</script>

<style scoped lang="scss">
.dialog-content {
  height: 70vh;
  overflow-y: scroll;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 1s;
    z-index: 1;
    cursor: not-allowed;
  }
  h3 {
    margin: 0;
    font-size: 15px;
  }
  .mt20 {
    margin-top: 20px;
  }
  .ml20 {
    margin-left: 20px;
  }
  .rules-container {
    display: flex;
    align-items: center;
    height: 32px;
  }
  .num-input-contain {
    color: #606266;
  }
  .input-width {
    width: 300px;
  }
}
.avue-crud {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 1s;
    z-index: 1;
    cursor: not-allowed;
  }
}
</style>
